{% extends 'base.html' %}

{% block title %}创建工单 - 维修管理系统{% endblock %}

{% block content %}
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">创建维修工单</h3>
                </div>
                <div class="card-body">
                    {% if messages %}
                    <div class="alert alert-info">
                        {% for message in messages %}
                        <div>{{ message }}</div>
                        {% endfor %}
                    </div>
                    {% endif %}

                    <form method="post" novalidate enctype="multipart/form-data">
                        {% csrf_token %}
                        
                        {% if form.non_field_errors %}
                        <div class="alert alert-danger">
                            {% for error in form.non_field_errors %}
                            {{ error }}
                            {% endfor %}
                        </div>
                        {% endif %}

                        <div class="mb-3">
                            <label for="{{ form.title.id_for_label }}" class="form-label">{{ form.title.label }}</label>
                            {{ form.title }}
                            {% if form.title.errors %}
                            <div class="text-danger">
                                {% for error in form.title.errors %}
                                {{ error }}
                                {% endfor %}
                            </div>
                            {% endif %}
                        </div>

                        <div class="mb-3">
                            <label for="{{ form.description.id_for_label }}" class="form-label">{{ form.description.label }}</label>
                            {{ form.description }}
                            {% if form.description.errors %}
                            <div class="text-danger">
                                {% for error in form.description.errors %}
                                {{ error }}
                                {% endfor %}
                            </div>
                            {% endif %}
                        </div>

                        <div class="mb-3">
                            <label for="{{ form.priority.id_for_label }}" class="form-label">{{ form.priority.label }}</label>
                            {{ form.priority }}
                            {% if form.priority.errors %}
                            <div class="text-danger">
                                {% for error in form.priority.errors %}
                                {{ error }}
                                {% endfor %}
                            </div>
                            {% endif %}
                        </div>

                        <div class="mb-3">
                            <label for="{{ form.assets.id_for_label }}" class="form-label">{{ form.assets.label }}</label>
                            {{ form.assets }}
                            {% if form.assets.errors %}
                            <div class="text-danger">
                                {% for error in form.assets.errors %}
                                {{ error }}
                                {% endfor %}
                            </div>
                            {% endif %}
                            <div class="form-text">{{ form.assets.help_text }}</div>
                            {% if not form.assets.queryset %}
                            <div class="alert alert-warning mt-2">
                                <small>您还没有分配任何设备。您可以选择创建新设备。</small>
                            </div>
                            {% endif %}
                        </div>

                        <!-- 新设备创建部分 -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="card-title mb-0">或创建新设备</h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="{{ form.new_device_name.id_for_label }}" class="form-label">{{ form.new_device_name.label }}</label>
                                            {{ form.new_device_name }}
                                            {% if form.new_device_name.errors %}
                                            <div class="text-danger">
                                                {% for error in form.new_device_name.errors %}
                                                {{ error }}
                                                {% endfor %}
                                            </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="{{ form.new_device_model.id_for_label }}" class="form-label">{{ form.new_device_model.label }}</label>
                                            {{ form.new_device_model }}
                                            {% if form.new_device_model.errors %}
                                            <div class="text-danger">
                                                {% for error in form.new_device_model.errors %}
                                                {{ error }}
                                                {% endfor %}
                                            </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="{{ form.new_device_serial.id_for_label }}" class="form-label">{{ form.new_device_serial.label }}</label>
                                            {{ form.new_device_serial }}
                                            {% if form.new_device_serial.errors %}
                                            <div class="text-danger">
                                                {% for error in form.new_device_serial.errors %}
                                                {{ error }}
                                                {% endfor %}
                                            </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="{{ form.new_device_type.id_for_label }}" class="form-label">{{ form.new_device_type.label }}</label>
                                            {{ form.new_device_type }}
                                            {% if form.new_device_type.errors %}
                                            <div class="text-danger">
                                                {% for error in form.new_device_type.errors %}
                                                {{ error }}
                                                {% endfor %}
                                            </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 图片上传区域 -->
                        <div class="mb-4">
                            <label for="imageInput" class="form-label">上传图片</label>
                            <input type="file" name="images" multiple accept="image/*" class="form-control" id="imageInput">
                            {% if form.images.errors %}
                            <div class="text-danger">
                                {% for error in form.images.errors %}
                                {{ error }}
                                {% endfor %}
                            </div>
                            {% endif %}
                            <div class="form-text">支持同时选择多张图片，单张不超过5MB，总大小不超过50MB</div>
                            
                            <!-- 图片预览区域 -->
                            <div class="image-preview-grid mt-3" id="imagePreview"></div>
                        </div>

                        <div class="d-grid gap-2">
                            <button type="submit" name="submit" class="btn btn-primary">正式提交</button>
                            <button type="submit" name="save_draft" class="btn btn-outline-secondary">保存草稿</button>
                            <a href="{% url 'tickets:ticket_list_mine' %}" class="btn btn-secondary">返回工单列表</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.container {
    max-width: 800px;
    margin: 20px auto;
}
.card {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border: none;
    border-radius: 8px;
}
.card-header {
    background-color: #2c3e50;
    color: white;
    border-radius: 8px 8px 0 0 !important;
}
.form-control {
    border-radius: 5px;
    border: 1px solid #ddd;
    padding: 10px;
}
.form-control:focus {
    border-color: #3498db;
    box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
}
.btn {
    border-radius: 5px;
    padding: 10px 20px;
}
.alert {
    border-radius: 5px;
    margin-bottom: 20px;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 查找Django生成的图片上传字段
    const imageInput = document.querySelector('input[type="file"][name="images"]');
    const imagePreview = document.getElementById('imagePreview');
    
    if (imageInput && imagePreview) {
        // 手动添加multiple属性，因为Django的FileInput不支持
        imageInput.setAttribute('multiple', 'multiple');
        
        // 监听文件选择变化
        imageInput.addEventListener('change', function(e) {
            previewImages(e.target.files);
        });
        
        // 支持拖拽功能
        const dropZone = imageInput.closest('.mb-4');
        if (dropZone) {
            dropZone.addEventListener('dragover', function(e) {
                e.preventDefault();
                dropZone.classList.add('dragover');
            });
            
            dropZone.addEventListener('dragleave', function(e) {
                e.preventDefault();
                dropZone.classList.remove('dragover');
            });
            
            dropZone.addEventListener('drop', function(e) {
                e.preventDefault();
                dropZone.classList.remove('dragover');
                
                const files = e.dataTransfer.files;
                if (files.length > 0) {
                    // 创建新的FileList对象
                    const dataTransfer = new DataTransfer();
                    for (let i = 0; i < files.length; i++) {
                        dataTransfer.items.add(files[i]);
                    }
                    imageInput.files = dataTransfer.files;
                    previewImages(imageInput.files);
                }
            });
        }
    }
    
    function previewImages(files) {
        imagePreview.innerHTML = '';
        
        if (!files || files.length === 0) {
            return;
        }
        
        for (let i = 0; i < files.length; i++) {
            const file = files[i];
            
            // 验证文件类型
            if (!file.type.startsWith('image/')) {
                continue;
            }
            
            const reader = new FileReader();
            reader.onload = function(e) {
                const previewItem = document.createElement('div');
                previewItem.className = 'preview-item';
                previewItem.style.cssText = `
                    position: relative;
                    border-radius: 8px;
                    overflow: hidden;
                    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
                    margin-bottom: 10px;
                `;
                
                const img = document.createElement('img');
                img.src = e.target.result;
                img.style.cssText = `
                    width: 100%;
                    height: 120px;
                    object-fit: cover;
                    display: block;
                `;
                
                const removeBtn = document.createElement('button');
                removeBtn.type = 'button';
                removeBtn.innerHTML = '×';
                removeBtn.style.cssText = `
                    position: absolute;
                    top: 5px;
                    right: 5px;
                    background: rgba(255,0,0,0.7);
                    color: white;
                    border: none;
                    border-radius: 50%;
                    width: 24px;
                    height: 24px;
                    cursor: pointer;
                    font-size: 16px;
                    line-height: 1;
                `;
                removeBtn.onclick = function() {
                    removeImage(i);
                };
                
                const fileName = document.createElement('div');
                fileName.textContent = file.name;
                fileName.style.cssText = `
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    background: rgba(0,0,0,0.7);
                    color: white;
                    padding: 4px;
                    font-size: 12px;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                `;
                
                previewItem.appendChild(img);
                previewItem.appendChild(removeBtn);
                previewItem.appendChild(fileName);
                imagePreview.appendChild(previewItem);
            };
            reader.readAsDataURL(file);
        }
    }
    
    function removeImage(index) {
        const dataTransfer = new DataTransfer();
        const files = imageInput.files;
        
        for (let i = 0; i < files.length; i++) {
            if (i !== index) {
                dataTransfer.items.add(files[i]);
            }
        }
        
        imageInput.files = dataTransfer.files;
        previewImages(imageInput.files);
    }
});

// 添加CSS样式
const style = document.createElement('style');
style.textContent = `
.image-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.preview-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}

.preview-item:hover {
    transform: scale(1.05);
}

.dragover {
    border: 2px dashed #3498db !important;
    background-color: #f0f8ff !important;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .image-preview-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 10px;
    }
}
`;
document.head.appendChild(style);
</script>
{% endblock %}
